<template>
  <div class="reg">
      <div class="goBack"><van-icon name="arrow-left" @click="goBack"/></div>
      <div class="topContent">
        <dl>
          <dt><img src="https://s3.pstatp.com/growth/fe_sdk/image/banner_toutiao_icon_bce0b302.png" class="titleImg"><p>账号注册</p></dt>
        </dl>
      </div>
      <div class="mainContent">
        <form>
          <p>
            <span @click="gophone">+86<van-icon name="arrow-down" class="iconPhtoto"/></span>
            <input type="text" name="uname" placeholder="手机号" v-model="uname">
          </p>
          <div class="checkText">
            <input type="checkbox" checked:flag @click="getTrue"><div>登录表示同意<span>"用户协议"</span>和<span>"隐私政策"</span></div>
          </div>
            <div class="gotoLogin" @click="getCode"><van-icon name="down" class="rightIcon"/></div>
        </form>
      </div>
      <van-popup
      v-model="phoneShow"
      closeable
      close-icon="arrow-left"
      position="right"
      close-icon-position="top-left"
      :style="{ width: '100%',height:'100%' }">
      <div class="van-bar">
          <van-index-bar >
            <van-index-anchor index="常用"  class="van-Top"/>
            <van-cell title="中国大陆" />
            <van-cell title="中国香港" />
            <van-cell title="中国澳门" />
            <van-cell title="中国台湾" />
            <van-index-anchor index="A" class="van-Top"/>
            <van-cell title="阿尔巴尼亚" />
            <van-cell title="阿尔及利亚" />
            <van-cell title="阿富汗" />
            <van-cell title="阿根挺" />
            <van-cell title="爱尔兰" />
            <van-cell title="埃及" />
            <van-cell title="埃塞俄比亚" />
            <van-cell title="爱沙尼亚" />
            <van-cell title="阿拉伯联合酋长国" />
            <van-cell title="阿曼" />
          </van-index-bar>
      </div>
      </van-popup>
    <van-popup
        v-model="codeShow"
        closeable
        close-icon="arrow-left"
        position="right"
        close-icon-position="top-left"
        :style="{ width: '100%',height:'100%' }">
        <div class="getcode">
        <div class="topContent">
            <dl>
            <dt><img src="https://s3.pstatp.com/growth/fe_sdk/image/banner_toutiao_icon_bce0b302.png" class="titleImg"><p>输入验证码</p></dt>
            <dd>验证码已发送至 <span>+86</span> <span class="telPhone">{{uname}}</span></dd>
            </dl>
        </div>
        <div class="mainContent">
            <form>
            <p class="p-last">
                <input type="text" name="ucode" v-model="ucode">
                <span @click="getnewCode">重新发送</span>
            </p>
            <div class="gotoLogin" @click="goPwd"><van-icon name="down" class="rightIcon"/></div>
            </form>
        </div>
        </div>
      </van-popup>
    <van-popup
        v-model="pwdShow"
        closeable
        close-icon="arrow-left"
        position="right"
        close-icon-position="top-left"
        :style="{ width: '100%',height:'100%' }">
        <div class="getcode">
        <div class="topContent">
            <dl>
            <dt><img src="https://s3.pstatp.com/growth/fe_sdk/image/banner_toutiao_icon_bce0b302.png" class="titleImg"><p>设置密码</p></dt>
            <dd>你已同意<span>"用户协议"</span>和<span>"隐私政策"</span></dd>
            </dl>
        </div>
        <div class="mainContent">
            <form>
            <p class="p-last">
                <input :type="upwdshow" name="upwd" v-model="upwd">
                <span @click="pwdshow"><van-icon :name="eyes" /></span>
            </p>
            <div class="gotoLogin" @click="gosetUser"><van-icon name="down" class="rightIcon"/></div>
            </form>
        </div>
        </div>
      </van-popup>
      <van-popup
        v-model="setUserShow"
        closeable
        close-icon="arrow-left"
        position="right"
        close-icon-position="top-left"
        :style="{ width: '100%',height:'100%' }">
        <div class="getUser">
            <div class="user-header">
            <input type="file" name="image" accept="image/*" @change='onchangeImgFun'
            class="header-upload-btn user-header-com">
            <img  alt="" :src='imgStr' class="user-header-img user-header-com">
          </div>
          <div class="inputmeg">
            <p><input type="text" placeholder="请输入昵称" v-model="nickname"></p>
            <p @click="gotoLoginNow"><span>完成</span></p>
            <span class="lastmeg">修改密码：&lt;我&gt;-&lt;设置&gt;-&lt;账号密码&gt;</span>
          </div>
        </div>
      </van-popup>
  </div>
</template>
<script>
var count = 1
export default {
  data: () => ({
    phoneShow: false,
    codeShow: false,
    pwdShow: false,
    uname: '',
    code: parseInt(Math.random() * 10000),
    ucode: '',
    upwd: '',
    nickname: '',
    eyes: 'closed-eye',
    upwdshow: 'password',
    phoneUrl: '',
    flag: false,
    setUserShow: false,
    dataURL: '',
    imgStr: require('../../../photo/timg.jpg')
  }),
  created () {
  },
  methods: {
    gophone () {
      this.phoneShow = true
    },
    goBack () {
      history.back()
    },
    getTrue () {
      this.flag = !this.flag
    },
    getCode () {
      if (!(/^1[3456789]\d{9}$/.test(this.uname))) {
        this.$toast('请输入正确的电话号码')
      } else if (!(this.flag)) {
        this.$toast('请阅读并同意协议')
      } else {
        this.codeShow = true
        setTimeout(() => {
          this.$toast(this.code)
        }, 1000)
      }
    },
    getnewCode () {
      this.$toast(this.code)
    },
    goPwd () {
      if (Number(this.ucode) !== this.code) {
        this.$toast.fail('请输入正确的验证码')
      } else {
        this.pwdShow = true
      }
    },
    pwdshow() {
      count++
      if (count % 2 === 0) {
        this.eyes = 'eye-o'
        this.upwdshow = 'text'
      } else {
        this.eyes = 'closed-eye'
        this.upwdshow = 'password'
      }
    },
    gosetUser () {
      if (this.upwd.length < 6) {
        this.$toast('密码不少于六位')
      } else {
        this.setUserShow = true
      }
    },
    onchangeImgFun (e) {
      this.phoneUrl = e.target.files[0]
      let imgSize = this.phoneUrl.size
      var _this = this
      if (imgSize <= 1000 * 1024) {
        var reader = new FileReader()
        reader.readAsDataURL(this.phoneUrl)
        reader.onloadend = function () {
          this.dataURL = reader.result
          _this.imgStr = this.dataURL
        }
      } else {
        this.$toast('图片大小不超过1M')
      }
    },
    gotoLoginNow () {
      if (this.nickname.length === 0) {
        this.$toast('请输入您的昵称')
      } else {
        var formdata = new FormData()
        formdata.set('uname', this.uname)
        formdata.set('upwd', this.upwd)
        formdata.set('nickname', this.nickname)
        formdata.set('phoneUrl', this.phoneUrl)
        this.$http.post('/api/reg', formdata).then((res) => {
          const { data: { status, message } } = res
          if (status !== 0) return this.$toast.fail('用户名已注册')
          this.$toast.success(message)
          setTimeout(function () {
            location = '//localhost:8080/#/user/login'
          }, 2000)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
      .goBack{
          width: 100%;
          height: 20px;
          position: fixed;
          top:20px;
          left: 20px;
      }
      dl{
    padding: 40px 0 0 0;
    display: flex;
    flex-direction: column;
      dt{
        display: flex;
        align-items: center;
        margin: 0;
        .titleImg{
          display: block;
          border: 1px solid #e9e8e8;
          border-radius: 6px;
          width: 40px;
          height: 40px;
          margin-left: 35px
        }
        p{
          font-size: 28px;
          padding-left: 10px
        }
      }
      dd{
        margin-top:-20px;
        font-size: 14px;
        color: #c0c0c0;
        letter-spacing:1px;
        span{
          color: #837f7f;
        }
      }
    }
    .mainContent{
      margin-top: 60px;
      p{
        width: 80%;
        height: 30px;
        margin-left: 35px;
        border-bottom: 1px solid #d3cece;
        .iconPhtoto{
          margin-left: 5px;
          margin-right: 10px;
          font-size: 11px;
          color: #000000;
        }
        input{
          margin-left: 2px;
          border:0px;
          font-size: 18px;
        }
      }
      .p-last{
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
          font-size: 13px;
          color: #837f7f
        }
        input{
          margin-bottom: 2px;
        }
      }
      .gotoLogin{
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: #dddada;
        text-align: center;
        margin: 0 auto;
        margin-top:60px;
        .rightIcon{
          font-size: 30px;
          color: #ffffff;
          transform: rotate(-90deg);
          margin-top:17px;
        }
      }
    }
    .van-bar{
      margin-top:35px;
      .van-Top{
        height: 30px;
        display: block;
        background: #f5f5f5;
        .van-index-anchor{
          font-size: 12px !important;
        }
      }
    }
    .goReg{
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-size: 12px;
      color: #c0c0c0;
      margin-top: 50px;
    }
    .checkText{
      width: 80%;
      color: #c0c0c0;
      font-size: 13px;
      text-align: center;
      margin-left: 35px;
      display: flex;
      span{
        color: #837f7f;
      }
    }

.user-header{
  position: relative;
  display: inline-block;
  width: 100%;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-header-com{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: 60px;
}
.header-upload-btn{
  position: absolute;
  left: 150px;
  top: 0;
  opacity: 0;
}
.tip{
  font-size: 14px;
  color: #666;
}
.error{
  font-size: 12px;
  color: tomato;
  margin-left: 10px;
}
.inputmeg{
  padding-top: 40px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  p{
    width: 80%;
    height: 50px;
    border: 1px solid #c0c0c0;
    border-radius: 25px;
    text-align: center;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    input{
      display: block;
      width: 60%;
      height: 40px;
      border: none;
      margin: 0 auto;
      text-align: center;
    }
    span{
      border-radius: 25px;
      width: 100%;
      height: 50px;
      line-height:50px;
      color: #ffffff;
      background: #E5645F
    }
  }
    .lastmeg{
      margin-top: 30px;
      font-size: 13px;
      color: #a5a4a4;
    }
}
</style>
